<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/step.css" />

    <style>
        body {
            background: #fff
        }

        .active {
            color: #333;
            font-weight: 600
        }

        .time {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 3.1rem;
            height: auto;
            margin-right: .8rem
        }

        .progress {
            padding: 0 .6rem;
            margin-top: .5rem
        }

        .progress-steps {
            margin-top: .6rem
        }

        .progress-step-item {
            margin: .6rem auto;
        }

        .grey-line {
            background: #CCCCCC;
            min-height: 1rem;
            width: 1px;
            height: inherit;;
        }
        .line{
          right: 1rem;
          left: 0.3rem;
          width: auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <section>
            <div class="font-10 text-color-9 step">
                <div class='setps'>
                    <div class="line"></div>
                    <div class=" step-z-index" style="width:100%">
                        <div class="step-item">
                            <div class="wancheng-img flex-center">
                                <img src="../image/order/wancheng.png" alt="">
                            </div>

                            <div>
                                提交申请
                            </div>

                        </div>
                        <div class="step-item">
                            <!-- <div class="dian"></div> -->
                            <div class="wancheng-img flex-center">
                                <img src="../image/order/wancheng.png" alt="">
                            </div>
                            <div>
                                商家受理
                            </div>

                        </div>
                        <div class="step-item">
                            <div class="dian"></div>
                            <div>
                                完成退货
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="font-14 text-color-9 progress">
                <div class="height-36 font-12 flex-justify-between">
                    <div>
                        售后单号：32169870
                    </div>
                    <div class="text-color-3">
                        取消申请
                    </div>
                </div>
                <div class="progress-steps">
                    <div class="progress-step-item">
                        <div class=" flex active">
                            <div class="time">
                                <div>
                                    10:20
                                </div>
                                <div class="font-12">
                                    2019.04.09
                                </div>

                            </div>
                            <div class="">
                                送回的商品商家已确认，退货完成！
                            </div>
                        </div>
                        <div class="progress-line-text">
                            <div class="time">
                                <div class="grey-line">
                                </div>
                            </div>
                            <div class="right-text">
                            </div>
                        </div>
                    </div>
                    <div class="progress-step-item">
                        <div class=" flex">
                            <div class="time">
                                <div>
                                    10:20
                                </div>
                                <div class="font-12">
                                    2019.04.09
                                </div>

                            </div>
                            <div class="">
                                商家已审核通过，请将商品送回商家地址
                            </div>
                        </div>
                        <div class="progress-line-text flex">
                            <div class="time">
                                <div class="grey-line" style="margin-left:1.5rem;margin-right:1.5rem">
                                </div>
                            </div>
                            <div class="right-text">
                                商家名称：万嘉便利店 联系电话：134283068900 详细地址：福建省福州市仓山区金阵路海峡创业广场3号楼3层02单元
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            type: '',
            reason: ''
        },
        methods: {

        }
    });
    apiready = function() {
        api.parseTapmode();
    };
</script>

</html>
